<template>
	<!--二维码分享 2024年11月28日 09:21:01 by gongxiaohui -->
	<view class="my-container">
		<view v-show="loading" class="loading flex-center color-primary" :class="{flex:loading}">
			加载中...
		</view>
		<view v-show="!loading">
			<topBack :title="roleCode == 'SALESMAN'?'':'邀请用户'" bgColor="transparent" color="#000">
				<view v-if="roleCode == 'SALESMAN'" class="tabs">
					<u-tabs :list="tabsList" :inactiveStyle="{
						color: '#333',
						fontSize: '28rpx'
					}" :activeStyle="{
		        color: '#3AB1A6',
		        fontSize: '28rpx'
					}" lineWidth="32" lineHeight="6" lineColor="#3AB1A6"
						itemStyle="padding-left: 20rpx; padding-right: 50rpx; height: 90rpx;" @tap="tabChange"></u-tabs>
				</view>
			</topBack>

			<posterCanvas class="poster" v-if="qrcode" ref="poster" :userInfo="userInfo" :appName="appName" :logoImg="logoImg"
				:qrcode="qrcode" :roleCode="roleCode" @complete="bindCanvasComplete">
			</posterCanvas>
			<view class="share font-28 flex flex-a-center flex-j-ar plr-32">
				<!-- <view class="weixin flex-column flex-a-center">
				<u-icon :name="weixin" size="90"></u-icon>
				<view class="mt-16">微信好友</view>
			</view>
			<view class="pengyouquan flex-column flex-a-center">
				<u-icon :name="pengyouquan" size="90"></u-icon>
				<view class="mt-16">朋友圈</view>
			</view> -->
				<view @tap="saveImage" class="haibao flex-column flex-a-center">
					<u-icon :name="haibao" size="90"></u-icon>
					<view class="mt-16">保存海报</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import weixin from '@/static/home/weixin.svg'
	import pengyouquan from '@/static/home/pengyouquan.svg'
	import haibao from '@/static/home/haibao.svg'
	import posterCanvas from './posterCanvas.vue'
	import {
		ossUrl
	} from '../../utils/tools'
	import {
		getQrcodeImage
	} from '@/src/service/qrcode.js'
	export default {
		components: {
			posterCanvas
		},
		data() {
			return {
				ossUrl,
				weixin,
				pengyouquan,
				haibao,
				userInfo: {},
				qrcode: '',
				appName: getApp().globalData.appName.slice(0, 3),
				roleCode: null,
				logoImg: '',
				tabsList: [{
					name: 'App二维码'
				}, {
					name: '小程序二维码'
				}],
				currTabIndex: 0,
				loading: false
			}
		},
		async onLoad() {
			this.loading = true;
			this.roleCode = uni.getStorageSync('roleCode');
			if (!this.roleCode) uni.removeStorageSync('token');
			await this.getUser()
			await this.getQrcode()
			// await this.tabChange({
			// 	index: 0
			// })
		},
		methods: {
			async tabChange(e) {
				this.currTabIndex = e.index;
				await this.getQrcode()
			},
			getUser() {
				this.userInfo = uni.getStorageSync('userInfo')
			},
			async getQrcode() {
				const qrcodeType = this.roleCode == 'SALESMAN' ? (this.currTabIndex == 0 ? 7 : 2) : 5

				const {
					data
				} = await getQrcodeImage(qrcodeType);
				if (data) {
					this.qrcode = data
				}
			},
			bindCanvasComplete() {
				this.loading = false;
			},
			saveImage() {
				this.$refs.poster.saveImage()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-container {
		height: 100vh;
		position: relative;

		.loading {
			width: 100%;
			height: 100%;
			background-color: #d0f0f2;
		}

		.tabs {
			width: 540rpx;
		}

		.poster {
			position: absolute;
			top: 0;
			left: 0;
		}

		.share {
			position: absolute;
			width: 100%;
			bottom: 90rpx;
			left: 0;
		}
	}
</style>